<html>
    <head>
        向子元素或子组件传递attribute和事件
    </head>
    <body>
        <script>
            // 二、 向子元素或子组件传递 attribute 和事件
                            /*
                                在普通组件中，没有被定义为 prop(组件实例对象属性) 的 attribute(标签属性) 会被添加到组件的根元素上，

                                将已有的同名 attribute 进行"替换"或者与其"智能合并"。
                            */

                            // 然而，函数式组件要求你显式定义该行为：
                            Vue.component('my-function-button',{
                                        functional:true,
                                        render:function(createElement,context){
                                            // 完全透传 attribute、事件监听器、子节点等。
                                            return createElement('button',context.data,context.children)
                                        }
                                    })
                            /*
                                通过向 createElement 传入 context.data 作为第二个参数，

                                我们就把 my-function-button 上面所有的 attribute 和 事件监听器都传递下去了。

                                事实上这是非常透明的，以至于那些事件甚至并不要求 .native 修饰符。

                                如果你使用基于模板的函数式组件，那么你还需要手动添加 attribute 和 监听器。

                                因为我们可以访问到其独立的上下文内容，所以我们可以使用 data.attrs 传递任何 HMTL attribute，
                                
                                也可以使用 listeners (即 data.on的别名)传递任何事件监听器？


                                    <template functional>
                                        <button 
                                            class="btn btn-primary"
                                            v-bind="data.attrs"
                                            v-on="listeners">
                                            <slot></slot>
                                        </button>
                                    </template>
                            */

        </script>
    </body>
</html>